<template>
  <a-layout has-sider>
    <!-- <a-layout-sider width="250px"
                    :style="{ overflow: 'auto', minHeight: '100vh', backgroundColor: '#fff',position: 'fixed', left: 10, top: 50, bottom: 20 }">
      
    </a-layout-sider> -->
	<div class="user-center-page">
		<div class="user-center-sider">
			<a-menu
			  v-model:openKeys="state.openKeys"
			  v-model:selectedKeys="state.selectedKeys"
			  mode="inline"
			  theme="light"
			  :inline-collapsed="state.collapsed"
			  :items="items"
			  @click="selectMenu"
			>
			</a-menu>
		</div>
		<div class="user-center-content">
			<a-layout>
			  <a-layout-content :style="{ backgroundColor: '#fff',}">
			    <router-view />
			  </a-layout-content>
			</a-layout>
		</div>
		
	</div>
    
  </a-layout>
</template>
<script lang="ts" setup>
import type { CSSProperties } from "vue";
import { h, onMounted, reactive, ref, watchEffect } from "vue";
import {
  FundOutlined,
  ProfileOutlined,
  SettingOutlined,
  SkypeOutlined,
  LayoutOutlined,
  AuditOutlined
} from "@ant-design/icons-vue";
import { useWebStore } from "@/store";
import router from "@/router";
import { useRoute } from "vue-router";

const route = useRoute();

const contentStyle: CSSProperties = {
  minHeight: 120,
  backgroundColor: "#fff"
};

const webStore = useWebStore();
const userInfo = ref<any>({});

const state = reactive({
  collapsed: false,
  selectedKeys: ["1"],
  openKeys: ["sub1"]
});
const items = reactive([
  {
    key: "sub1",
    icon: () => h(SettingOutlined),
    label: "基本设置",
    title: "基本设置",
    children: [
      {
        key: "1",
        label: "个人信息",
        title: "个人信息",
        path: "/userCenter/baseSetting"
      },
      {
        key: "2",
        label: "账号安全",
        title: "账号安全",
        path: "/userCenter/accountSetting"
      }
    ]
  },
  // {
  //   key: "sub2",
  //   icon: () => h(LayoutOutlined),
  //   label: "订单中心",
  //   title: "订单中心",
  //   children: [
  //     {
  //       key: "3",
  //       label: "我的订单",
  //       title: "我的订单",
  //       path: "/userCenter/myOrder"
  //     }
  //   ]
  // },
  {
    key: "sub3",
    icon: () => h(FundOutlined),
    label: "课程学习",
    title: "课程学习",
    children: [
      {
        key: "4",
        label: "学习进度",
        title: "学习进度",
        path: "/userCenter/course/studyProcess"
      },
      {
        key: "5",
        label: "学习记录",
        title: "学习记录",
        path: "/userCenter/course/studyRecord"
      }
    ]
  },
  {
    key: "6",
    icon: () => h(ProfileOutlined),
    label: "练习记录",
    title: "练习记录",
    path: "/userCenter/practice/record"
  },
  {
    key: "7",
    icon: () => h(SkypeOutlined),
    label: "考试成绩",
    title: "考试成绩",
    path: "/userCenter/exam/examScore"
  },
  {
    key: "8",
    icon: () => h(AuditOutlined),
    label: "我的证书",
    title: "我的证书",
    path: "/userCenter/certificate"
  }
]);

onMounted(() => {
  userInfo.value = webStore.getUserInfo;
});

function selectMenu(e) {
  if (!e.item?.path) {
    return;
  }
  router.push(e.item.path);
}

watchEffect(() => {
  if (route.path) {
    let path = prepare(route.path);
    items.forEach((item: any) => {
      if (item?.children?.length > 0) {
        const index = item.children.findIndex(child => (child.path == path || child.path.includes(path)));
        if (index >= 0) {
          state.openKeys = [item.key];
          state.selectedKeys = [item.children[index].key];
        }
      } else {
        if (item.path == path || item.path.includes(path)) {
          state.openKeys = [item.key];
          state.selectedKeys = [item.key];
        }
      }
    });
  }
});

function prepare(routePath) {
  let path = routePath;
  if (route.path.includes("/userExamResult")) {
    path = route.path.substring(0, route.path.indexOf("/userExamResult"));
  }
  if (route.path.includes("/orderDetail")) {
    path = route.path.substring(0, route.path.indexOf("/orderDetail"));
  }
  if (route.path.includes("/refund")) {
    path = route.path.substring(0, route.path.indexOf("/refund"));
  }
  if (route.path.includes("/addEval")) {
    path = route.path.substring(0, route.path.indexOf("/addEval"));
  }
  return path;
}
</script>
<style lang="scss" scoped>
.avatar {
  text-align: center;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
.user-center-page{
	width:1200px;
	margin:10px auto;
	.user-center-sider{
		width:30%;
		float:left;
		height:100%;
		ul{
			height:100%;
		}
	}
	.user-center-content{
		float:right;
		width:68%;
		height:100%;
	}
}
.realname {
  margin: 15px 0;
  font-size: 16px;
}

:deep(.ant-menu-light.ant-menu-inline .ant-menu-sub.ant-menu-inline) {
  background: white;
}

:deep(.ant-card-body) {
  padding: 10px;
}

</style>
